<template>
	<view ref="gyDropdownMenuItem" class="gy-dropdown-menu-item" :id="gyDropdownMenuItemId">
		<view class="gy-dropdown-menu-item-show" @click.stop="openActionSheetFn">
            <view>{{ filterFn(props.modelValue) }}</view>
            <com-icon v-if="actionSheet.visible === 'show'" name="gy_icon_below" :size="18" color="#07BF66" style="transform: rotateZ(-180deg);" />
            <com-icon v-else name="gy_icon_below" :size="18" />
        </view>
        <view
            v-if="actionSheet.show"
            class="gy-dropdown-menu-action-sheet gy-mask"
            :class="'gy-mask-' + actionSheet.visible"
			:style="{top: actionSheetTop}"
			@click.stop="hideActionSheetFn">
            <view class="gy-dropdown-menu-action-sheet-box" :class="actionSheet.visible" @click.stop="">
                <slot>
                    <view
                        class="gy-dropdown-menu-action-sheet-item"
                        :class="{active: props.modelValue === item.value}"
                        v-for="(item, index) in props.option"
                        :key="index"
                        @click.stop="selectFn(index)">
                        <view>{{ item.label }}</view>
						<com-icon name="gy_icon_correct" :size="28" />
                    </view>
                </slot>
            </view>
        </view>
	</view>
</template>

<script lang="ts" setup>

    import {
    	ref,
    	computed,
    	onBeforeMount,
    	onMounted,
    	getCurrentInstance
    } from "vue";

	const gyDropdownMenuItemId = 'gy-dropdown-menu-item-' + guid2();

	const { proxy }: any = getCurrentInstance();

    const emits = defineEmits(["change", "update:modelValue", "beforeActiveSheet"]);

    const props = defineProps({
    	modelValue: {
    		type: String,
    	},
        defaultValue: {
        	type: String,
            default: "全部"
        },
    	option: {
    		type: Array as () => Array<LabelValue>,
            default: () => []
    	}
    });

	const actionSheetTop = ref("0px");
    const actionSheet = ref({
        show: false,
        visible: "hide"
    });

	function guid2() {
		function S4() {
			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
		}
		return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
	}

    function selectFn(index: number){
        emits("update:modelValue", props.option[index].value);
        emits("change", props.option[index].value);
        hideActionSheetFn();
    }

    function openActionSheetFn(){
        if(actionSheet.value.show){
            hideActionSheetFn();
        }else{
            emits("beforeActiveSheet");
			closeAllActionSheetFn();
			actionSheet.value = {
			    show: true,
			    visible: "show"
			};
        }
    }
    function hideActionSheetFn(){
        actionSheet.value.visible = "hide";
        setTimeout(() => {
            actionSheet.value.show = false;
        }, 500);
    }
	function closeAllActionSheetFn(){
	    let children: any = [];
	    // #ifdef MP-WEIXIN
	    children = proxy.$parent.$children;
	    // #endif
	    for (let i = 0; i < children.length; i++) {
	    	children[i].hideActionSheetFn();
	    }
	}

    function filterFn(value: string){
        for (var i = 0; i < props.option.length; i++) {
            if(props.option[i].value && props.option[i].value === value){
                return props.option[i].label;
            }
        }
        return props.defaultValue;
    }

    defineExpose({
		name: "gy-dropdown-menu-item",
		props: props,
		setActionSheetTop: function(val: string){
            actionSheetTop.value = val;
        },
        hideActionSheetFn: function(){
            actionSheet.value = {
                show: false,
                visible: "hide"
            };
        }
    });

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-dropdown-menu-item{
	    width: 100%;
	    position: relative;
	    background-color: #fff;
	    .gy-dropdown-menu-item-show{
	        width: 100%;
	        height: 100rpx;
	        @include flex-center-center;
	        padding: 0 10rpx;
			view{
				font-size: var(--gy-font-size-medium);
				@include text-ellipsis(1);
			}
			:deep(gy-icon){
				display: block;
			    margin-left: 10rpx;
			}
	        :deep(.gy-icon){
	            margin-left: 10rpx;
	        }
	    }
		.gy-dropdown-menu-item-show:active{
			background-color: var(--gy-page-bg-color);
		}
	    .gy-dropdown-menu-action-sheet{
	        background-color: rgba(0, 0, 0, 0);
	        .gy-dropdown-menu-action-sheet-box{
	            background-color: #fff;
	            max-height: 50%;
				height: 0;
	            overflow: auto;
				transition: 5s;
	            border-top: 1rpx solid var(--gy-card-line-color);
	            .gy-dropdown-menu-action-sheet-item{
	                height: 100rpx;
	                line-height: 100rpx;
	                font-size: var(--gy-font-size-medium);
	                margin: 0 var(--gy-gap);
	                @include text-ellipsis(1);
	                color: var(--gy-text-color-regular);
					@include flex-between-center;
					view{
						flex: 1;
						@include text-ellipsis(1);
					}
					:deep(.gy-icon){
						color: var(--el-text-color-disabled) !important;
						margin-left: var(--gy-gap) !important;
					}
	            }
	            .gy-dropdown-menu-action-sheet-item+.gy-dropdown-menu-action-sheet-item{
	                border-top: 1rpx solid var(--gy-card-line-color);
	            }
	            .gy-dropdown-menu-action-sheet-item.active{
	                color: var(--gy-color-primary);
					:deep(.gy-icon){
						color: var(--gy-color-primary) !important;
					}
	            }
	        }
	        .gy-dropdown-menu-action-sheet-box.show{
				height: auto;
	        }
	        .gy-dropdown-menu-action-sheet-box.hide{
				height: 0;
	        }
	    }

	}

</style>
